import * as api from '../../util/api';
import React,{Component} from 'react';
import {Button ,Input ,Modal} from 'antd';
import axios from 'axios';
import { Table, Divider, Tag ,Pagination} from 'antd';
export default class Dong extends React.Component {
	
state = { visible: false , list:[] ,id:'',visible1:false};
showModal = () => {
    this.setState({
    visible: true,
	
    });
};
showModal1(id){
	console.log(id)
	
	
	api.idPro(id).then((data)=>{
		console.log(data)
		setTimeout(() => {
			console.log(this.refs)
			this.refs.a.value = data.data.name
			this.refs.b.value = data.data.quantity
			this.refs.c.value = data.data.price
			this.refs.d.value = data.data.coverImg
			this.refs.e.value = data.data.descriptions
			this.refs.f.value = data.data.productCategory
			this.refs.g.value = data.data._id
		},1);
		// this.refs.b.value = data.data.quantity
		// this.refs.c.value = data.data.price
		// this.refs.d.value = data.data.coverImg
		// this.refs.e.value = data.data.descriptions
		// this.refs.f.value = data.data.productCategory
		this.setState({
			visible1: true,
    });
	})
	
    
  };
hideModal = () => {
    this.setState({
	  visible: false,
	  visible1: false
    });
  };
addModal = () => {
	  var name = this.refs.tit.value
	  var quantity = this.refs.tit1.value
	  var price = this.refs.tit2.value
	  var coverImg = this.refs.tit3.value
	  var descriptions = this.refs.tit4.value
	  console.log(name)
	  console.log(quantity)
	  console.log(price)
	  console.log(coverImg)
	  console.log(descriptions)
	  let params = {name,quantity,price,coverImg,descriptions,productCategory}
	  console.log(params)
	  api.addPro(params).then((data)=>{
	  		  console.log(data.data)
	  			api.proList({per:10,page:10}).then((data)=>{
	  				console.log(data.data.products)
	  				this.setState({
	  					list:data.data.products,
						 visible: false
	  				})
	  				
	  			})
	   })
	   this.refs.tit.value=''
	   this.refs.tit1.value=''
	   this.refs.tit2.value=''
	   this.refs.tit3.value=''
	   this.refs.tit4.value=''
	  
};
addModal1 = () => {
	var name = this.refs.a.value
	var quantity = this.refs.b.value
	var price = this.refs.c.value
	var coverImg = this.refs.d.value
	var descriptions = this.refs.e.value
	var productCategory = this.refs.f.value
	var id = this.refs.g.value
	console.log(this.refs)
	let params = {id,name,quantity,price,coverImg,descriptions,productCategory}
	console.log(params)
	api.updatePro(params).then((data)=>{
			console.log(data)
				api.proList({per:10,page:10}).then((data)=>{
					console.log(data.data.products)
					this.setState({
						list:data.data.products,
						visible1: false
					})
					
				})
	})
};
delete(id){
api.delPro(id).then((data)=>{
		console.log(data)
		api.proList({per:10,page:10}).then((data)=>{
			console.log(data.data.products)
			this.setState({
				list:data.data.products
			})
			
		})
	})
	
}

render() {
    return (
    <div>
        <Button type="primary" onClick={this.showModal}>
        添加订单
        </Button>
		
        <Modal
        title="添加订单"
        visible={this.state.visible}
        onOk={this.addModal}
        onCancel={this.hideModal}
        okText="确认"
        cancelText="取消"
        >
          	<p>订单名字</p>
          	<input type='text' ref='tit'/>
			<p>订单数量</p>
			<input type='text' ref='tit1'/>
          	<p>订单价格</p>
          	<input type='text' ref='tit2'/>
          	<p>订单图片</p>
          	<input type='text' ref='tit3'/>
          	<p>订单详情</p>
          	<input type='text' ref='tit4'/>
        </Modal>
		<table style={{width:1000,height:40,border:1}}>
		      <tr>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>订单名字</td>
			  <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>订单数量</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>订单价格</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>订单图片</td>
		      <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>订单详情</td>
			  <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>订单编辑</td>
			  </tr>
			  </table>
		{
		   this.state.list.map((item,id)=>{
				return(
					<div key={id}>
					<table style={{width:1000,height:40,border:1,tableLayout:'fixed'}}>
					<tr>
					 <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>
						 {item.name}</td>
					 <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>
						 {item.quantity}</td>
					 <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>
						 {item.price}</td>
				     <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>
						 <img src={item.coverImg} style={{width: 50,
	height: 50}}/></td>
					 <td style={{width: 88,overflow:'hidden',textOverflow:'ellipsis',wordBreak:'keepAll',whiteSpace:"nowrap",height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>
						 {item.descriptions}</td>
			         <td style={{width: 88,height: 50,textAlign:'center',borderWidth: 1,borderStyle: 'solid',borderColor: '#666666',backgroundColor: '#ffffff',background:"url(http://img0.imgtn.bdimg.com/it/u=3913352838,1496379388&fm=26&gp=0.jpg)"}}>
						 <Button id={item._id} type="primary" onClick={()=>this.showModal1(item._id)}>
        修改订单
        </Button>
		
        
			         <Button type="danger" id={item._id} onClick={()=>this.delete(item._id)}>删除</Button>
			         </td>
		          </tr>
				</table>
				</div>
			)
		})
		}
		<Modal
          title="修改订单"
          visible={this.state.visible1}
          onOk={this.addModal1}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
			<p>id</p>
			<input tyupe='text' ref='g' disabled="disabled"/>
          	<p>订单名字</p>
          	<input type='text' ref='a'/>
			<p>订单数量</p>
			<input type='text' ref='b'/>
          	<p>订单价格</p>
          	<input type='text' ref='c'/>
          	<p>订单图片</p>
          	<input type='text' ref='d'/>
          	<p>订单详情</p>
          	<input type='text' ref='e'/>
			<p>订单分类</p>
			<input type='text' ref='f'/>
        </Modal>
		<br/>
		<Pagination defaultCurrent={1} total={50} />
      </div>
    );
  }
  componentDidMount(){
  	var _this=this
    api.proList({per:10,page:10}).then((data)=>{
  		console.log(data.data.products)
  		_this.setState({
  			list:data.data.products
  		})
  		
  	})
	
	}
	}
